Lets remove props this is going to be removed in Next 7

sure. Btw I was not sure how to best approach this example.
I tried to just make dynamic imports directly in pages like:

const BarChart = dynamic(import('recharts').then(({ BarChart }) => BarChart), { ssr: false }),
const Bar = dynamic(import('recharts').then(({ Bar }) => Bar), { ssr: false })

But I experienced charts not being drawn. I think that these two components had to be together ready before they were rendered. The above way solved the issue.

I also thought about just making a directory BarChart and LineChart with index.js file exporting:

export default dynamic(import('./BarChart'), { ssr: false });
// ... and
export default dynamic(import('./LineChart'), { ssr: false });

but this would resolve in recharts being bundled twice for these two chunks (and it's quite big).

Same here as my other comment